<template>
    <div style='text-align:left'>
    <div class='block'>
    <el-button type='primary' icon='el-icon-edit' v-on:click='doThis'></el-button>
    <el-button type='primary' icon='el-icon-share'></el-button>
    <el-button type='primary' icon='el-icon-delete'></el-button>
    <el-button type='primary'>上传<i class='el-icon-upload el-icon--right'></i></el-button>
    </div>
    <el-card class='box-card'>
      <el-row>
        <el-col :span='2'>
          <el-input v-model='input' placeholder='请输入内容'></el-input> 
        </el-col>
        <el-col :span='2'>
          <el-select v-model='value' placeholder='请选择'>
            <el-option
              v-for='item in options'
              :key='item.value'
              :label='item.label'
              :value='item.value'>
            </el-option>
          </el-select>
        </el-col>
        <el-col :span='2'>
          <el-input v-model='input' placeholder='请输入内容'></el-input>
        </el-col>
        <el-col :span='4'>
          <el-date-picker
            v-model='value1'
            type='datetime'
            placeholder='选择日期时间'>
          </el-date-picker>
        </el-col>
      <el-button type='primary' icon='el-icon-search'>搜索</el-button>
      </el-row>
    </el-card>
     <el-card class='box-card'>
     <el-table
    :data='tableData3'
    height='500'
    border
    style='width: 100%'>
    <el-table-column
      prop='date'
      label='日期'
      width='180'>
    </el-table-column>
    <el-table-column
      prop='name'
      label='姓名'
      width='180'>
    </el-table-column>
    <el-table-column
      prop='address'
      label='地址'>
    </el-table-column>
  </el-table>
  </el-card>
  <div class='block'>
    <el-pagination
      @size-change='handleSizeChange'
      @current-change='handleCurrentChange'
      :current-page='currentPage4'
      :page-sizes='[100, 200, 300, 400]'
      :page-size='100'
      layout='total, sizes, prev, pager, next, jumper'
      :total='400'>
    </el-pagination>
  </div>
    </div>    
</template>

<script>
import userEdit from '@/components/user/userEdit';
export default {
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
  data() {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: '',
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      tableData3: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    };
  }
};
</script>

<style>
</style>
